<template>
  <div class="wrapper">
    <el-dialog
      :visible="dialogVisible"
      :title="dialogType === 'new' ? '新建任务' : '编辑任务'"
      :before-close="beforClose"
      :close-on-click-modal="false"
    >
      <SearchForm
        v-if="isShow"
        ref="searchForm"
        :rules="rules"
        :inline="true"
        :label-width="'150px'"
        :search-form="searchForm"
        :search-data="searchData"
        :search-handle="searchHandle"
        no-border="border:none"
        class="detialSearch"
      />
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from "@/components/searchForm";
import { AddNewTask, Task, uploadFile } from "@/api/task.js";
import { UserQuery } from "@/api/mange.js";

export default {
  name: "Dialog",
  components: {
    SearchForm,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogType: {
      type: String,
      default: "new",
    },
    dialogData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      isShow: true,
      rules: {
        taskTitle: [
          {
            trigger: "blur",
            required: true,
            message: "请输入标题",
          },
        ],
      },
      searchData: {
        taskTitle: "",
        taskResponsibleId: "",
        projectName: "",
        taskType: "",
        taskState: "",
        startTime: "",
        endTime: "",
        description: "",
        file: "",
        sourcePath: "",
      },
      searchForm: [
        {
          type: "Input",
          label: "标题:",
          prop: "taskTitle",
          class: "titleInp",
          clearable: true,
          clear: () => {},
          InputWidth: "width:100%",
          input: (val) => {},
        },
        {
          type: "Text",
          label: "项目:",
          options: [],
          prop: "projectName",
          disabled: true,
          clearable: true,
          InputWidth: "width:100%",
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Select",
          label: "负责人/协作者:",
          options: [],
          prop: "taskResponsibleId",
          clearable: true,
          InputWidth: "width:100%",
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Select",
          label: "类型:",
          options: [
            {
              value: 1,
              label: "任务",
            },
            {
              value: 2,
              label: "需求",
            },
            {
              value: 3,
              label: "缺陷",
            },
          ],
          prop: "taskType",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Select",
          label: "状态:",
          options: [
            {
              value: 1,
              label: "进行中",
            },
            {
              value: 2,
              label: "已拒绝",
            },
            {
              value: 3,
              label: "已完成",
            },
            {
              value: 4,
              label: "已验收",
            },
          ],
          prop: "taskState",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "DateTime",
          label: "计划时间:",
          prop: "startTime",
          placeholder: "开始时间",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "DateTime",
          label: " -- ",
          prop: "endTime",
          placeholder: "结束时间",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "ueditor",
          label: "描述:",
          prop: "description",
          isClear: false,
          isEdit: "",
          InputWidth: "width:100%",
          class: "ueditorCont",
          changeUeditor: (val) => {},
        },
        {
          type: "file",
          label: "附件:",
          listType: "picture-card",
          imgUrl: "file",
          prop: "file",
          listType: "picture-card",
          class: "fileStyle",
          text: "点击选择文件",
          fileList: [],
          limit: 1,
          disabled: false,
          clearable: true,
          action: "",
          // handlePreview: (file) => {
          // },
          // handleRemove: () => {
          // },
          handleAvatarProgress: (event, file, fileList) => {
          },
          handleAvatarSuccess: (file) => {},
          handleAvatarProgress: () => {
          },
          beforeAvatarUpload: (file) => {
            const formData = new FormData();
            formData.append("file", file);
            uploadFile(formData).then((res) => {
              this.searchData.file = res.result.fileName;
              this.searchData.sourcePath = res.result.path;
              this.searchForm[8].fileList = [
                {
                  name: res.result.fileName,
                  url: res.result.path,
                },
              ];
            });
          },
          handleChange: (file) => {},
          InputWidth: "width:100%",
        },
      ],
      searchHandle: [
        {
          type: "primary",
          label: "新建",
          handle: (item) => {
            if (this.dialogType == "new") {
              this.searchData.projectName =
                window.localStorage.getItem("projectName");
              AddNewTask({
                taskTitle: this.searchData.taskTitle,
                projectName: this.searchData.projectName,
                taskResponsible: this.searchData.taskResponsible,
                taskResponsibleId: this.searchData.taskResponsibleId,
                relationProjectId: window.localStorage.getItem("projectId"),
                taskType: this.searchData.taskType,
                taskState: this.searchData.taskState,
                startTime: this.searchData.startTime,
                endTime: this.searchData.endTime,
                description: this.searchData.description,
                file: this.searchData.file,
              }).then((res) => {
                this.$emit("addTsk");
                this.$emit("close");
              });
            } else if (this.dialogType == "edit") {
              AddNewTask({
                id: this.searchData.id,
                taskTitle: this.searchData.taskTitle,
                projectName: this.searchData.projectName,
                taskResponsible: this.searchData.taskResponsible,
                taskResponsibleId: this.searchData.taskResponsibleId,
                relationProjectId: this.searchData.relationProjectId,
                taskTypeName: this.searchData.taskTypeName,
                taskType: this.searchData.taskType,
                status: this.searchData.status,
                taskStateName: this.searchData.taskStateName,
                taskState: this.searchData.taskState,
                startTime: this.searchData.startTime,
                endTime: this.searchData.endTime,
                description: this.searchData.description,
                file: this.searchData.file,
              }).then((res) => {
                this.$emit("addTsk");
                this.$emit("close");
              });
            }
          },
          textRender: (params, index) => {
            if (this.dialogType == "new") {
              return (params = "新建");
            } else {
              return (params = "确定");
            }
          },
        },
        {
          type: "primary",
          label: "重置",
          handle: () => {
            this.searchData = {
              taskTitle: "",
              taskResponsibleId: "",
              projectName: window.localStorage.getItem("projectName"),
              taskType: "",
              taskState: "",
              startTime: "",
              endTime: "",
              description: "",
              file: "",
            };
          },
        },
        {
          type: "primary",
          label: "关闭",
          handle: () => {
            this.$emit("close");
          },
        },
      ],
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.userQuery();
    this.queryTask();
  },
  methods: {
    queryTask() {
      this.searchForm[1].options = [];
      Task({}).then((res) => {
        res.result.map((item) => {
          this.searchForm[1].options.push({
            label: item.projectName,
            value: item.id,
          });
        });
      });
    },
    beforClose(val) {
      this.$emit("close");
    },
    userQuery() {
      this.searchForm[2].options = [];
      UserQuery({}).then((res) => {
        res.result.map((item) => {
          this.searchForm[2].options.push({
            label: item.name,
            value: item.id,
          });
        });
      });
    },
  },
};
</script>
<style scoped>
.el-form-item__content {
  width: 85% !important;
}
</style>
<style lang="scss">
.wrapper {
  .titleInp {
    .el-form-item__content {
      width: 76%;
      .text {
        width: 100%;
      }
    }
  }

  .fileStyle {
    .el-form-item__content {
      // width: 79%;
      // height: 150px;
      // background: #eee;
    }
    .upload-demo {
      width: 100%;
      height: 150px;
      // padding-left: 60px;
    }
  }
  .ueditorCont {
    .el-form-item__content {
      width: 79%;
      .editor {
        width: 100%;
      }
    }
  }
}
</style>
